import React, { Component } from "react";
import { connect } from "react-redux";
import { getPersonalizedList } from "../../redux/actions";
import { List } from "antd-mobile";

import "./index.scss"

class Index extends Component {
  componentDidMount() {
    this.props.getPersonalizedList();
  }
  render() {
    // console.log("this.props", this.props);
    // console.log(this.props.personalizedList);
    const { personalizedList } = this.props;
    return (
    <List>
      <div className="m-i-content-list-item">
        <ul>
        {personalizedList.slice(0,10).map((item,index) => (
          <li key={item.id}  onClick={() =>
                this.props.history.push(`/billBoard/${item.id}/${encodeURIComponent(item.name)}/R`)
              }>
            <div className="pic-item">
              <div className="pic-content">
                <img src={item.picUrl} alt={item.name} />
                <span className="item-bottom">
                  <span className="play-icon iconfont">&#xe624;</span>
                  <span className="play-count"></span>
                  <span className="play-button iconfont">&#xe6bf;</span>
                </span>
              </div>
              <span className="pic-title">{item.name}</span>
            </div>
          </li>
        ))}
        </ul>
       
      </div>
    
    </List>);
  }
}
export default connect(
  state => ({ personalizedList: state.personalizedList }),
  { getPersonalizedList }
)(Index);
